約束與靈活性

泛型（Generics）這個 TypeScript 的特性就像是一束光
為我們在強型別中提供了彈性的方法

因此，了解泛型將讓我們更有感覺
同時也更有把握
在面對複雜的型別挑戰時更加游刃有餘

泛型（Generics)

使用泛型時
我們可以型別約束
且不用特地為了某型別另外再寫複用的方法

舉例以下個簡單例子
假設我們有一個任務
要跟據使用者給的參數而回傳會員資訊

TypeScript 函數 useUserCluster
它接受一個泛型參數 UserType
該參數可以是 VipMember 或 NormalMember 中的一種

const vipLevelStatus =  [
  'normal',
  'not vip but better than normal',
  'vip',
] as const 

type VipLevel = typeof vipLevelStatus[number];

interface VipMember {
  name: string;
  vipLevel: VipLevel;
}

interface NormalMember {
  name: string;
  email: string;
}


export const useUserCluster = <UserType extends VipMember | NormalMember>() => {

  const getUserName = (user: UserType) => {
    return user.name;
  }

  const getUserLevel = (user: UserType): VipLevel  => {
    if ('vipLevel' in user) {
      return  (user as VipMember).vipLevel;
    }
    return vipLevelStatus[0];
  }

  return {
    getUserName,
    getUserLevel
  }
}

// NormalMember
const normalUserCluster =  useUserCluster<NormalMember>();
const normalUser: NormalMember  = {
  name: 'John',
  email: '1234@gmail.com',
}
console.log(normalUserCluster.getUserName(normalUser)); // John
console.log(normalUserCluster.getUserLevel(normalUser)); // normal

// VIP
const vipCluster =  useUserCluster<VipMember>();
const vipUser: VipMember  = {
  name: 'Super Man',
  vipLevel: vipLevelStatus[2],
}
console.log(vipCluster.getUserName(vipUser)); // Super Man
console.log(vipCluster.getUserLevel(vipUser)); // vip

期待在下一篇中繼續分享更多有趣的內容＾_______＾